<template>
    <card dis-hover>
        <i-form inline :label-width="40" class="search-column">
            <form-item label="名称">
                <i-input v-model="search.title" clearable placeholder="请输入"/>
            </form-item>
            <form-item :label-width="0">
                <i-button :loading="loading" type="primary" icon="ios-search" @click="handlerSearch">搜索</i-button>
                <i-button type="success" icon="md-add" @click="modal.show = true,modal.type='create'">新增</i-button>
            </form-item>
        </i-form>
        <i-table stripe border :loading="loading" :columns="table.header" :data="table.body"/>
        <page class="pager"
              show-sizer
              :current="page.page"
              :total="page.count"
              @on-change="pageFn"
              @on-page-size-change="pageSizeChangeFn"
              prev-text="上一页"
              next-text="下一页"/>
        <!--新增公告-->
        <modal v-model="modal.show"
               :mask-closable="false"
               :styles="{top:'10px'}"
               @on-visible-change="modalChangeFn"
               :width="635" title="新增公告">
            <i-form :label-width="90"
                    ref="addDataModal"
                    :model="modal.form"
                    :rules="modal.rules">
                <form-item label="公告标题" prop="title">
                    <i-input v-model="modal.form.title" placeholder="请填写公告标题"/>
                </form-item>

                <form-item label="公告内容">
                    <i-input v-model="modal.form.content" :rows="10" type="textarea" placeholder="请填写公告内容"/>
                </form-item>
            </i-form>
            <div slot="footer">
                <i-button @click="modal.show = false">取消</i-button>
                <i-button type="primary" @click="modalSubmitFn">确定</i-button>
            </div>
        </modal>
    </card>
</template>
<script>
    import API from '../../lib/API_PATH'
    import cmsUpload from '../../components/cms-upload'
    import mixinList from '../../mixins/list'

    const initFormData = {
        title: '',
        content: '',
    }
    const DATA_NAME = '公告'
    export default {
        name: 'Notice',
        mixins: [mixinList],
        data() {
            return {
                apiUrl: API.NOTICE,
                search: {
                    title: ''
                },
                table: {
                    header: [
                        {
                            type: 'index',
                            width: 60
                        },
                        {
                            title: '名称',
                            key: 'title'
                        },
                        {
                            title: '内容',
                            tooltip: true,
                            key: 'content'
                        },
                        {
                            title: '发布者',
                            tooltip: true,
                            render: (h, params) => {
                                const name = params.row.auth.name
                                return h('span', name)
                            }
                        },
                        {
                            title: '建立日期',
                            key: 'createAt',
                            width: 110,
                            render: (h, params) => {
                                return h('span', this.$utils.dateFormat(params.row.createAt))
                            }
                        },
                        {
                            title: '操作',
                            width: 130,
                            render: (h, params) => {
                                const row = params.row
                                const id = row._id
                                const deleteBtn = h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        ghost: true
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '您确定要删除这一项吗？',
                                                onOk: () => {
                                                    this.removeDataFn(id)
                                                }
                                            })
                                        }
                                    }
                                }, '删除')
                                const editBtn = h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        ghost: true,
                                    },
                                    on: {
                                        click: () => {
                                            this.modal.type = 'edit'
                                            this.modal.show = true
                                            this.modal.id = id
                                            console.log(row)
                                            this.modal.form = {
                                                title: row.title,
                                                content: row.content,
                                            }
                                        }
                                    }
                                }, '修改')
                                return h('button-group', [
                                    deleteBtn,
                                    editBtn,
                                ])
                            }
                        }
                    ],
                    body: [],
                },
                modal: {
                    show: false,
                    form: this.$utils.deepClone(initFormData),
                    type: 'create',
                    rules: {
                        title: [
                            {required: true, min: 3, message: `${DATA_NAME}名称最少三个字符`, trigger: 'blur'},
                        ],
                    }
                }
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            modalChangeFn() {
                if (this.modal.type === 'create') {
                    this.modal.form = this.$utils.deepClone(initFormData)
                }
            },
            // 新增公告
            async addDataFn() {
                const req = this.modal.form
                try {
                    const {data} = await this.$http.post(API.NOTICE, req)
                    this.modal.form = this.$utils.deepClone(initFormData)
                    this.getDataFn()
                    this.$Message.success(`新增${DATA_NAME}成功`)
                    this.modal.show = false
                } catch (e) {
                    console.log(e)
                    this.$utils.errMessage(e, `新增${DATA_NAME}`)
                }
            },
            // 修改公告
            async editDataFn() {
                let req = this.modal.form
                req.id = this.modal.id
                try {
                    const {data} = await this.$http.put(API.NOTICE, req)
                    this.getDataFn()
                    this.$Message.success(`修改${DATA_NAME}成功`)
                    this.modal.show = false
                } catch (e) {
                    console.log(e)
                    this.$utils.errMessage(e, `修改${DATA_NAME}`)
                }
            },
            // 删除公告
            async removeDataFn(id) {
                try {
                    const {data} = await this.$http.delete(API.NOTICE, {params: {id}})
                    this.getDataFn()
                    this.$Message.success(`删除${DATA_NAME}成功`)
                    this.modal.show = false
                } catch (e) {
                    console.log(e)
                    this.$utils.errMessage(e, `删除${DATA_NAME}`)
                }
            },
            // 模态框确认
            modalSubmitFn() {
                this.$refs.addDataModal.validate((valid) => {
                    if (valid) {
                        if (this.modal.type === 'create') {
                            this.addDataFn()
                        }
                        if (this.modal.type === 'edit') {
                            this.editDataFn()
                        }
                    }
                })
            }
        },
        components: {
            cmsUpload
        }
    }
</script>
